<template>
	<view class="main">
    <u-popup :show="popupShow" mode="center" :safeAreaInsetBottom="false" :customStyle="popupCustomStyle" :closeable="true" @close="popupShow=false">
      <view class="content u-p-36">
        <view class="member-info">
          <text>会员ID：</text>
          <text>{{ customerServiceInfoVo.memberId }}</text>
        </view>
        <view class="service-wechat-qr" v-if="customerServiceInfoVo.serviceWeChatQr">
          <!-- #ifdef MP-WEIXIN -->
          <u--image :showLoading="true" :src="imageUrl + customerServiceInfoVo.serviceWeChatQr" width="260rpx" height="260rpx" style="margin: 0 auto"/>
          <!-- #endif -->
          <!-- #ifdef MP-ALIPAY -->
          <image :src="imageUrl + customerServiceInfoVo.serviceWeChatQr" style="width: 260rpx;height: 260rpx"/>
          <!-- #endif -->
          <view class="wechat-qr-tips">
            提示：微信用户请长按二维码加商家好友，支付宝用户请截图加商家好友
          </view>
        </view>
        <view class="service-wechat-num" v-if="customerServiceInfoVo.serviceWeChatNumber">
          <view class="m-flex-row">
            <text>微信号：</text>
            <text :selectable="true">{{customerServiceInfoVo.serviceWeChatNumber}}</text>
          </view>
          <view class="wechat-num-tips">
            提示：长按复制加商家好友
          </view>
        </view>
        <view class="service-wechat-phone" v-if="customerServiceInfoVo.serviceMobilePhone || customerServiceInfoVo.serviceFixedTelephone">
          <view>
            <text v-if="customerServiceInfoVo.serviceName">{{ customerServiceInfoVo.serviceName }}：</text>
            <text v-else>商家电话：</text>
            <text>
              <text v-if="customerServiceInfoVo.serviceMobilePhone" @click="call(customerServiceInfoVo.serviceMobilePhone)">{{customerServiceInfoVo.serviceMobilePhone}}</text>
              <text v-else-if="customerServiceInfoVo.serviceFixedTelephone" @click="call(customerServiceInfoVo.serviceFixedTelephone)">{{customerServiceInfoVo.serviceFixedTelephone}}</text>
            </text>
          </view>
          <view class="wechat-phone-tips">
            提示：点击号码即可拨打电话
          </view>
        </view>
        <view class="service-no u-m-t-50" v-if="
          !customerServiceInfoVo.serviceWeChatQr
          && !customerServiceInfoVo.serviceWeChatNumber
          && !customerServiceInfoVo.serviceName
          && !customerServiceInfoVo.serviceMobilePhone
          && !customerServiceInfoVo.serviceFixedTelephone
        ">
          商家暂未预留客服信息
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	export default {
		name:"service",
		data() {
			return {
        imageUrl: this.$configPath.imageUrl,
        popupCustomStyle: {
          width: '634rpx',
          boxSizing: 'border-box',
          border: '10rpx solid transparent',
          borderRadius: '30rpx',
          backgroundClip: 'padding-box, border-box',
          backgroundOrigin: 'padding-box, border-box',
          backgroundImage: 'linear-gradient(to right, #fff, #fff), linear-gradient(rgba(245,252,254,1) 1.564%,rgba(195,230,239,1) 16.693%,rgba(221,225,255,1) 45.864%,rgba(232,203,251,1) 74.298%,rgba(175,209,228,1) 92.179%,rgba(255,255,255,1) 100%)',
        },

        popupShow: false,
        customerServiceInfoVo: {
          id:'',
          serviceName:'',
          serviceWeChatNumber:'',
          serviceWeChatQr:'',
          serviceMobilePhone:'',
          serviceFixedTelephone:'',
          memberId:''
        },
			};
		},
    props:{
      merchantStoreId: {
        type: Number,
        value: null
      },
    },
    watch: {

      merchantStoreId(newVal, oldVal) {
        // console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
      }
    },
    methods: {
      serviceShow(){
        this.findServiceByMerchantStoreId();
      },

      call(phoneNum){
        // console.log("phoneNum", phoneNum)
        uni.makePhoneCall({
          phoneNumber: phoneNum,
          fail(){
            getApp().err('拨打电话不成功');
          }
        });
      },

      findServiceByMerchantStoreId(){
        let param = {
          merchantStoreId: this.merchantStoreId,
		  //#ifdef MP-WEIXIN || MP-ALIPAY
			deviceNo: this.$parent.deviceNo,
		  // #endif
		  //#ifdef H5
			deviceNo: this.$parent.$parent.deviceNo,
		  // #endif
		  
        }
		// console.log("来了吗",this.$parent.$parent.deviceNo)
        this.$api('customerServiceInfo.findCustomerServiceInfoByApplet', param).then(res => {
          if (res.status == 0) {
            if (!this.$u.test.isEmpty(res.data)){
              this.customerServiceInfoVo = res.data
            }
            this.popupShow = true;
          }
        }).catch(err => {
          uni.hideLoading();
        })
      },
    }
	}
</script>

<style lang="scss" scoped>
.main{
  .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: $f-lg;

    .service-wechat-qr{
      width: 400rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 50rpx;

      .wechat-qr-tips{
        color: rgba(0,0,0,0.7);
        margin-top: 10rpx;
        font-size: $f-sm;
      }
    }

    .service-wechat-num{
      margin-top: 50rpx;
      .wechat-num-tips{
        color: rgba(0,0,0,0.7);
        margin-top: 10rpx;
        font-size: $f-sm;
        text-align: center;
      }
    }

    .service-wechat-phone{
      margin-top: 50rpx;
      .wechat-phone-tips{
        color: rgba(0,0,0,0.7);
        margin-top: 10rpx;
        font-size: $f-sm;
        text-align: center;
      }
    }

    .service-no{
      color: rgba(0,0,0,0.7);
    }
  }
}
</style>
